<template>
  <div class="page-container" id="page-container">
    <map-frame ref="mapRef" @openPopupBox="handleOpenPopupBox"></map-frame>
    <div class="tool-box">
      <tool-box
        :isToolShow="isToolShow"
        @measurePolygon="measurePolygon"
        @measureLine="measureLine"
        @clearScreen="clearScreen"
        @addMarker="addMarker"
        @toolShow="handleToolShow"
      ></tool-box>
    </div>
    <div class="layer-tree">
      <layer-tree
        :treeData="layerTreeData"
        :defaultCheckedTree="defaultCheckedData"
        @showLayer="handleShowLayer"
        @hideLayer="handleHideLayer"
      ></layer-tree>
    </div>
    <!--<div class="zoom-btns">
      <div class="btn-out" @click="handleZoomIn"></div>
      <div class="btn-in" @click="handleZoomOut"></div>
    </div>-->
    <!--  <div v-if="0" class="btn-heatmap" @click="handleHeatmap">报警热力图</div>
    <div v-if="0" class="btn-test" @click="handleTest">测试</div>-->
  </div>
</template>

<script setup>
import { onMounted, ref, createApp, defineExpose, h, watch } from 'vue'
import installIcons from '@/icons'
import installEcharts from '@/plugins/echarts'
import installElementPlus from '@/plugins/element'
import MapFrame from '@/components/MapFrame/index.vue'
import ToolBox from '@/components/ToolBox'
import LayerTree from '@/components/LayerTree/index'
import { crAlarmList } from '@/api/screen.js'
import urlRedOut from '@/assets/images/screen/gis/alarm_red_out.png'
import urlRedIn from '@/assets/images/screen/gis/alarm_red_in.png'
import urlGreenOut from '@/assets/images/screen/gis/alarm_green_out.png'
import urlGreenIn from '@/assets/images/screen/gis/alarm_green_in.png'
import urlGreyOut from '@/assets/images/screen/gis/alarm_grey_out.png'
import urlGreyIn from '@/assets/images/screen/gis/alarm_grey_in.png'

import popupTemplate from './Popup/popupTemplate.vue'
import buildingDialog from './Popup/buildingDialog.vue'

const mapRef = ref(null)
const booleanHeatmap = ref(false)
const isToolShow = ref(true)
const list = ref([])
const sparkSpeed = 2

const layerTreeData = [
  {
    id: 'yunwei',
    label: '运维设备',
    icon: 'level_1',
    children: [
      {
        id: 'xiaofang',
        label: '消防系统',
        icon: 'xiaofang'
      },
      {
        id: 'tongfeng',
        label: '通风系统',
        icon: 'tongfeng'
      },
      {
        id: 'gongdian',
        label: '供电系统',
        icon: 'gongdian'
      },
      {
        id: 'zhaoming',
        label: '照明系统',
        icon: 'zhaoming'
      },
      {
        id: 'paishui',
        label: '排水系统',
        icon: 'paishui'
      },
      {
        id: 'qita',
        label: '其他系统',
        icon: 'qita'
      }
    ]
  },
  {
    id: 'jiance',
    label: '监测设备',
    icon: 'level_1',
    children: [
      {
        id: 'qitijiance',
        label: '气体检测仪',
        icon: 'qitijiance'
      },
      {
        id: 'yeweiji',
        label: '液位计',
        icon: 'yeweiji'
      },
      {
        id: 'wenduji',
        label: '湿温度计',
        icon: 'wenduji'
      },
      {
        id: 'shipin',
        label: '视频监测',
        icon: 'shipin'
      }
    ]
  },
  {
    id: 'zhoubian',
    label: '周边环境',
    icon: 'level_1',
    children: [
      {
        id: 'yunweirenyuan',
        label: '运维人员',
        icon: 'yunweirenyuan'
      },
      {
        id: 'jiuyuandui',
        label: '救援队',
        icon: 'jiuyuandui'
      },
      {
        id: 'yiyuan',
        label: '医院',
        icon: 'yiyuan'
      }
    ]
  }
]
const defaultCheckedData = [
  'xiaofang',
  'tongfeng',
  'gongdian',
  'zhaoming',
  'paishui',
  'qita',
  'qitijiance',
  'yeweiji',
  'wenduji',
  'shipin',
  'yunweirenyuan',
  'jiuyuandui',
  'yiyuan'
]

//初始化地图：底图、点击事件
const initBaseMap = () => {
  mapRef.value.selectBaseMap('img')
}
const createDialog = ({ dialog, dialogProps }) => {
  const lastDialog = document.getElementById('dialogContainer')
  if (lastDialog) {
    lastDialog.remove()
  }

  const cesiumElement = document.getElementById('cesiumContainer')
  const dialogElement = document.createElement('div')
  dialogElement.id = 'dialogContainer'

  const vueApp = createApp({
    render: () => {
      return h(dialog, {
        title: dialogProps.title,
        data: dialogProps.data,
        cesiumEvent: dialogProps.cesiumEvent
      })
    }
  })
  installElementPlus(vueApp)
  installIcons(vueApp)
  installEcharts(vueApp)
  vueApp.mount(dialogElement)

  cesiumElement.appendChild(dialogElement)
  dialogElement.style.position = 'absolute'
  const stopwatch = watch(
    () => mapRef.value.pickPosition.x,
    () => {
      const dialogRemoved = document.getElementById('dialogContainer')
      if (!dialogRemoved) {
        stopwatch()
        return
      }
      //  const x=mapRef.value.px.x-dialogRemoved/width;
      // const y=mapRef.value.px.x-dialogRemoved/width;
      dialogElement.style.left =
        mapRef.value.pickPosition.x - dialogRemoved.offsetWidth / 2 + 'px'
      dialogElement.style.top =
        mapRef.value.pickPosition.y - dialogRemoved.offsetHeight + 'px'
    },
    { immediate: true }
  )
}

const handleOpenPopupBox = (entity) => {
  const data = list.value.filter((item) => item.deviceNo === entity._id)
  mapRef.value.showInfoWindow({
    offset: {
      x: 5,
      y: 63
    },
    popupTemplate: popupTemplate,
    entity: entity,
    popupBoxProps: {
      title: data[0].deviceName,
      data: data
    }
  })
}
//添加地图要素：报警器、3D城市、天街模型、光墙、等
const addDevice = () => {
  crAlarmList()
    .then((data) => {
      list.value = data
      // console.log('list:', data)
      data.map((item) => {
        if (item.longitude !== undefined) {
          if (item.status === '离线') {
            mapRef.value.addFlashingBillboard({
              type: 'alarmGrey',
              image: urlGreyOut,
              position: [item.longitude, item.latitude],
              id: item.deviceNo,

              flashingSpeed: sparkSpeed
            })
            mapRef.value.addBillboard({
              type: 'alarmGrey',
              image: urlGreyIn,
              position: [item.longitude, item.latitude],
              id: item.deviceNo,
              width: 25,
              height: 24,
              offset: [-1, -22]
            })
          } else if (item.status === '在线') {
            if (!item.ifAlarm) {
              mapRef.value.addFlashingBillboard({
                type: 'alarmGreen',
                image: urlGreenOut,
                position: [item.longitude, item.latitude],
                id: item.deviceNo,

                flashingSpeed: sparkSpeed,
                properties: {}
              })
              mapRef.value.addBillboard({
                type: 'alarmGreen',
                image: urlGreenIn,
                position: [item.longitude, item.latitude],
                id: item.deviceNo,
                width: 25,
                height: 24,
                offset: [-1, -22]
              })
            } else {
              mapRef.value.addFlashingBillboard({
                type: 'alarmRed',
                image: urlRedOut,
                position: [item.longitude, item.latitude],
                id: item.deviceNo,

                flashingSpeed: sparkSpeed,
                properties: {}
              })
              mapRef.value.addBillboard({
                type: 'alarmRed',
                image: urlRedIn,
                position: [item.longitude, item.latitude],
                id: item.deviceNo,
                width: 25,
                height: 24,
                offset: [-1, -22]
              })
            }
          }
        }
      })
    })
    .catch((error) => {
      console.log('error:===>>>' + error)
    })

  // mapRef.value.flyToPosition(119.298288, 26.096047)
}

//大屏控制：放大缩小，获取相机位置信息
const handleZoomIn = () => {
  mapRef.value.zoomIn()
}
const handleZoomOut = () => {
  mapRef.value.zoomOut()
}

//地图工具箱
const addMarker = (params) => {
  mapRef.value.addMarker(params)
}

const measureLine = () => {
  mapRef.value.drawLineMeasure()
}

const measurePolygon = () => {
  mapRef.value.drawAreaMeasure()
}

const clearScreen = () => {
  mapRef.value.clearDrawMeasure()
  mapRef.value.clearScreen()
  mapRef.value.closeInfoWindow()
}

const handleToolShow = () => {
  isToolShow.value = !isToolShow.value
}

//图层控制
const handleShowLayer = (layerId) => {
  mapRef.value.changeDataSourcesShow(layerId, true)
}

const handleHideLayer = (layerId) => {
  mapRef.value.changeDataSourcesShow(layerId, false)
}

/**
 * @description: 获取camera信息，用于入场时候camera特定角度
 * @return {type}
 * @author: Dadaoshen
 */
const getCameraInfo = () => {
  const cameroInfo = mapRef.value.getCameraInfo()
  console.log('cameroInfo:', cameroInfo)
}
//前端交互：定位报警器、关闭窗口
/**
 * @description: 用于大屏交互，点击大屏，飞到某个点
 * @param {type} deviceNo
 * @return {type}
 * @author: Dadaoshen
 */
const linkMapAlarm = (deviceNo) => {
  const data = list.value.filter((item) => item.deviceNo === deviceNo)
  const entity = {
    longitude: data[0].longitude,
    latitude: data[0].latitude
  }
  mapRef.value.showInfoWindow({
    offset: {
      x: 5,
      y: 63
    },
    popupTemplate: popupTemplate,
    entity: entity,
    popupBoxProps: {
      title: data[0].deviceName,
      data: data
    }
  })
}
const closeNodeWindow = () => {
  mapRef.value.closeInfoWindow()
}
//测试按钮
const handleTest = () => {}

onMounted(() => {
  initBaseMap()

  mapRef.value.cameraFlyto({
    lon: 119.78303,
    lat: 25.51177,
    height: 100000
  })
})
defineExpose({
  linkMapAlarm,
  closeNodeWindow
})
</script>

<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;

  .tool-box {
    position: fixed;
    top: 85px;
    right: 535px;
    z-index: 1111;
  }

  .layer-tree {
    position: absolute;
    top: 85px;
    left: 535px;
    z-index: 1111;
  }

  .zoom-btns {
    position: absolute;
    top: 92%;
    right: 560px;
    z-index: 1;
    display: flex;

    .btn-out {
      // left: 1241px;
      width: 61px;
      height: 39px;
      background: url(~@@/images/screen/gis/zoom_out.png) no-repeat;
      background-size: contain;
      cursor: pointer;
      &:active {
        background: url(~@@/images/screen/gis/zoom_out_active.png) no-repeat;
      }
    }
    .btn-in {
      // left: 1310px;
      width: 61px;
      height: 39px;
      background: url(~@@/images/screen/gis/zoom_in.png) no-repeat;
      background-size: contain;
      margin-left: 10px;
      cursor: pointer;
      &:active {
        background: url(~@@/images/screen/gis/zoom_in_active.png) no-repeat;
      }
    }
  }
  .btn-heatmap {
    position: absolute;
    top: 102px;
    right: 505px;
    z-index: 1;

    width: 112px;
    height: 31px;

    border: 1px solid #1079db;
    box-shadow: 2px 3px 3px 0px rgba(0, 0, 0, 0.15);
    background-color: rgba(23, 94, 221, 0.2);

    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-style: italic;
    line-height: 31px;
    text-align: center;
    // color: #bdbebe;
    color: #ffffff;

    cursor: pointer;
  }
  .floor-btns {
    position: absolute;
    top: 142px;
    right: 505px;
    z-index: 1;

    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-style: italic;
    // color: #bdbebe;
    color: #ffffff;
    line-height: 31px;
    text-align: center;

    .floor-inactive {
      width: 33px;
      height: 31px;
      background-color: rgba(23, 94, 221, 0.2);
      border: 1px solid #1079db;
      box-shadow: 2px 3px 3px 0px rgba(0, 0, 0, 0.15);
      cursor: pointer;
    }
    .floor-active {
      @extend.floor-inactive;
      background-color: #1876d8;
    }
  }
  .building-controller {
    position: absolute;
    top: 20%;
    right: 560px;
    z-index: 1;
    width: 250px;
    .slider-demo-block {
      display: flex;
      align-items: center;
    }
    .slider-demo-block .el-slider {
      margin-top: 0;
      margin-left: 12px;
    }
    .slider-demo-block .demonstration {
      font-size: 14px;

      color: rgb(255, 255, 0);
      width: 60px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 0;
    }
    .slider-demo-block .demonstration + .el-slider {
      flex: 0 0 70%;
    }
  }
  .btn-test {
    position: absolute;
    top: 50px;
    right: 505px;
    z-index: 1;

    width: 112px;
    height: 31px;

    border: 1px solid #1079db;
    box-shadow: 2px 3px 3px 0px rgba(0, 0, 0, 0.15);
    background-color: rgba(23, 94, 221, 0.2);

    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-style: italic;
    line-height: 31px;
    text-align: center;
    // color: #bdbebe;
    color: #ffffff;

    cursor: pointer;
  }
}
</style>
